<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style type="text/css">
		
	</style>
	<body>
		<style type="text/css">
			.box {
				width: 300px; background: lightblue;
			}
			
		</style>
		<p>默认情况下，图片下方莫名的多出一些间隙</p>
		<div class="box">
			<img src="img/qianfenglogo.png" >
		</div>
		<br>
		<p>我们再图片后面写上几个字，会发现一些端倪</p>
		<div class="box">
			<img src="img/qianfenglogo.png" >
			xyz
		</div>
		<br>
		<style type="text/css">
			.demo {
				position: relative;
			}
			.line {
				position: absolute;
				width: 100%; border-bottom: dashed 1px darkred;
			}
			.middleline {
				border-bottom: solid 1px blue;
			}
		</style>
		<p>当前，图片和文字，在垂直方向 是以baseline为基准对齐的</p>
		<p>而图片的baseline，在它的底部</p>
		<div class="box demo">
			<div class="line" style="top:53px"></div>
			<img src="img/qianfenglogo.png" >
			xyz
		</div>
		<br>
		<div class="box demo">
			<div class="line" style="top:37px"></div>
			<div class="line" style="top:45px"></div>
			<div class="line" style="top:53px"></div>
			<img src="img/qianfenglogo.png" >
			xyz
		</div>
		<br>
		<p>我们给img 加上vertical-align:middle</p>
		<div class="box demo">
			<div class="line" style="top:14px"></div>
			<div class="line" style="top:22px"></div>
			<div class="line" style="top:30px"></div>
			<div class="line middleline" style="top:27px"></div>
			<img src="img/qianfenglogo.png" style="vertical-align: middle;">
			xyz
		</div>
		<br>
		<p>我们给父元素固定了100高度，发现图片文字对齐了，但并没用垂直居中</p>
		<div class="box demo" style="height: 100px;">
			<div class="line" style="top:14px"></div>
			<div class="line" style="top:22px"></div>
			<div class="line" style="top:30px"></div>
			<div class="line middleline" style="top:27px"></div>
			<img src="img/qianfenglogo.png" style="vertical-align: middle;">
			xyz
		</div>
	
		<br>
		<p>我们给span, 增加行高为100px</p>
		<div class="box demo" style="height: 100px;">
			<div class="line" style="top:40px"></div>
			<div class="line" style="top:47px"></div>
			<div class="line" style="top:55px"></div>
			<div class="line middleline" style="top:52px"></div>
			<img src="img/qianfenglogo.png" style="vertical-align: middle;">
			<span style="line-height: 100px; background: white;">xyz</span>
		</div>
		
		<br>
		<p>span是为了实验加上去的，现在把span去掉</p>
		<div class="box demo" style="height: 100px;">
			<div class="line" style="top:14px"></div>
			<div class="line" style="top:22px"></div>
			<div class="line" style="top:30px"></div>
			<div class="line middleline" style="top:27px"></div>
			<img src="img/qianfenglogo.png" style="vertical-align: middle;">
			xyz
		</div>
		
		<br>
		<p>我们给父元素增加line-height:100px</p>
		<div class="box demo" style="height: 100px; line-height: 100px;">
			<div class="line" style="top:40px"></div>
			<div class="line" style="top:47px"></div>
			<div class="line" style="top:55px"></div>
			<div class="line middleline" style="top:52px"></div>
			<img src="img/qianfenglogo.png" style="vertical-align: middle;">
			xyz
		</div>
		
		<div style="height: 60px; border: dashed 1px #555;">
			<input type="text"/><img src="img/fangdajing.jpg" >
		</div>
	</body>
</html>